<template>
  <div class="container">
    <div class="content">
      <messageList :loading="loading" :list="msglist" @changeReadStatus="updateReadMessage"></messageList>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import messageList from '@/components/messageList/messageList'
import { listPost_message, updateRead_message } from '@/api/messageCenter/message'

export default {
  name: 'Post',
  components: {
    messageList
  },
  data() {
    return {
      loading: true,
      // 总条数
      total: 0,
      // 消息列表
      msglist: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        postCode: undefined,
        postName: undefined,
        status: undefined
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async updateReadMessage(id) {
      let res = await updateRead_message(id)
      const { code } = res
      if (code == 200) {
        this.getList()
      }
    },
    /** 查询消息列表 */
    getList() {
      this.loading = true
      listPost_message(this.queryParams).then(response => {
        this.msglist = response.rows
        this.total = response.total
        this.loading = false
      })
    }
  }
}
</script>
<style scoped lang="scss">
.content {
  padding: 20px 40px;
  box-sizing: border-box;
  background: white;
  width: 100%;
  border-radius: 20px;
  height: calc(((100vh - 68px) - 18px) - 30px);
}
</style>
